import './Animation.scss';
import React from 'react';
import Appear, { appearRun } from './Appear/Appear';
import Wave from './Wave/Wave';
import Process from './Process/Process';
import gsap from 'gsap';
import RotateFont, { rotateFontRun } from './RotateFont/RotateFont';

const t1 = gsap.timeline();

export type allAnimateObjGen = appearRun | rotateFontRun | null

export interface animationBaseProps<T> {
  animateObj: animateObj<T>
}

interface AnimationConfig {
  outFn: null | (() => void)
  animationList: AnimationItem[]
}

interface AnimationItem{
  render: React.FC<any>
  key: string,
  animateObj: animateObj<allAnimateObjGen>
}

export interface animateObj<T> {
  t1: GSAPTimeline
  duration: number
  label: string
  position: string
  delay?: number
  buttons?: animateButton[]
  callAnimate?: (targets: HTMLElement | null, t1: GSAPTimeline) => void
  stopCall?: () => void
  run?: T
}

export interface animateButton{
  label: string,
  key: string,
  callBack: (targets: HTMLElement | null, t1: GSAPTimeline) => void
}

interface animateProps{
  loadingAnimate: () => void
}

const ANIMATION_CONFIG: AnimationConfig = {
  outFn: null,
  animationList: [
    {
      render: Wave,
      key: 'Wave',
      animateObj: {
        t1: t1,
        duration: 3,
        label: 'Wave',
        position: '0'
      }
    },
    {
      render: Appear,
      key: 'Game Words',
      animateObj: {
        t1: t1,
        duration: 1,
        run: 'BY BEON',
        label: 'Words',
        position: 'Wave',
        callAnimate: (targets, t1) => {
          t1.to(targets, {
            duration: 0.5,
            y: -50
          }, 'Words');
          t1.to(targets, {
            duration: 0.5,
            letterSpacing: '-20px',
            opacity: 0
          }, 'Words+=1.5');
        }
      }
    },
    {
      render: Process,
      key: 'Process',
      animateObj: {
        t1: t1,
        duration: 6,
        position: 'Words',
        label: 'Process',
        callAnimate: (targets, t1) => {
          t1.to(targets, {
            duration: 0.5,
            rotateX: 90,
            opacity: 0,
            scale: 0
          }, 'Words+=6');
        }
      }
    },
    {
      render: RotateFont,
      key: 'RotateFont',
      animateObj: {
        t1: t1,
        duration: 1,
        run: {
          words: ['这是一个游戏', '也是一份简历', '是否通过游戏了解BEON'],
          // words: [],
          buttons: [
            {
              words: '是',
              onClick: (e) => {
                ANIMATION_CONFIG.outFn && ANIMATION_CONFIG.outFn();
                console.log('YES');
                console.log(e);
              }
            },
            {
              words: '否',
              onClick: (e) => {
                alert('给点面子嘛')
                console.log('No');
                console.log(e);
              }
            }
          ]
        },
        position: 'Process',
        label: 'RotateFont'
      }
    }
  ]
};

const Animation: React.FC<animateProps> = (props) => {
  console.log(4444);
  React.useEffect(() => {
    ANIMATION_CONFIG.outFn = props.loadingAnimate;
    return function cleanup() {
      console.log('组件被卸载componentWillUnmount');
    };
  }, []);
  return <div className={'animation-box'}>
    {
      ANIMATION_CONFIG.animationList.map((item) => {
        const Tag = item.render;
        return <Tag animateObj={item.animateObj} key={item.key} />;
      })
    }
    {
      createButtonsRender()
    }
  </div>;
};

function createButtonsRender() {
  function play() {
    t1.play();
  }
  function pause() {
    t1.pause();
  }
  function reverse() {
    stopForever();
    t1.reverse();
  }
  function restart() {
    stopForever();
    t1.restart();
  }
  function stopForever() {
    ANIMATION_CONFIG.animationList.forEach((item) => {
      item.animateObj.stopCall && item.animateObj.stopCall();
    });
  }
  return <div className={'animation-buttons-box'}>
    <button onClick={play}>播放</button>
    <button onClick={pause}>暂停</button>
    <button onClick={reverse}>倒退</button>
    <button onClick={restart}>重新开始</button>
  </div>;
}

export default Animation;
